!{% extends "云商/后台/template.html" %}
{% block title %}我的订单{% endblock %}
{% block css %}{% endblock %}
{% block body %}

<div class="">
    <div class="layui-tab layui-tab-brief layui-padding-2" lay-filter="test-hash">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="1">待发货</li>
            <li lay-id="2">待验收</li>
            <li lay-id="3">成功交易</li>
            <li lay-id="4">已退款</li>
            <li lay-id="5">我购买的商品</li>
            <li lay-id="6">我发布的商品</li>
            <li lay-id="7">已购买未发货</li>
        </ul>
        <div class="layui-tab-content">
            <!-- <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="A" value="" placeholder="Field A" class="layui-input"
                            lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="C" readonly placeholder="Field C"
                            class="layui-input order_time">
                    </div>
                </div>
                <div class="layui-btn-container layui-col-xs12">
                    <button class="layui-btn" lay-submit lay-filter="demo-table-search">Search</button>
                    <button type="reset" class="layui-btn layui-btn-primary">Clear</button>
                </div>
            </form>  -->

            <table class="layui-hide" id="isPendingDelivery"></table>
        </div>
    </div>
</div>

{% endblock %}
{% block js %}
<script type="text/html" id="ID-table-demo-css-tool">
    <div class="layui-form layui-form-testcss">
      <div>
        <button class="layui-btn layui-btn-sm" lay-on="fahuo">发货</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-on="tuikuan">退款</button>
      </div>
    </div>
  </script>
<script type="text/html" id="order_err">
    <div class="layui-form layui-form-testcss">
      <div>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-on="order_err">订单存在异常</button>
      </div>
    </div>
  </script>

  <script type="text/html" id="my_buy_order">
    <div class="layui-form layui-form-testcss">
      <div>
        <button class="layui-btn layui-btn-sm" lay-on="is_shohuo">确认收货</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-on="no_shoohuo">商品不符</button>
      </div>
    </div>
  </script>
<script>
    function a(e, u) {
        // 提供给 发货和退款
        var order_id = e[0].parentNode.parentNode.parentNode.parentNode.parentNode.querySelector('td[data-field="order_id"]').innerText;
        axios({
            url: u,
            method: 'POST',
            data: { "order_id": order_id }
        }).then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        }).finally(() => {
            setTimeout(() => {
                YyRefresh()
            }, 1500);
        })
    }
    layui.use(function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var util = layui.util;
        var layer = layui.layer;
        var element = layui.element;

        // tab 切换事件
        element.on('tab(test-hash)', function (data) {
            var lay_id = this.getAttribute('lay-id');
            if (lay_id == 1) {
                table.render({
                    elem: '#isPendingDelivery',
                    url: '/api/CloudShop/user/select/my_order/', // 此处为静态模拟数据，实际使用时需换成真实接口
                    cols: [[
                        { field: 'order_id', title: 'ID', },
                        { field: 'goods_name', title: '商品名称', },
                        { field: 'order_price', title: '商品价格', },
                        { field: 'order_status', title: '商品状态', },
                        { field: 'buy_user_name', title: '客户名' },
                        { field: 'buy_user_email', title: '客户邮箱' },
                        { field: 'order_time', title: '下单时间' },
                        { width: 160, height: 50, title: '操作', templet: '#ID-table-demo-css-tool' }
                    ]],
                    height: 310,
                    method: 'post',
                    where: { "user_id": Yyuser_info.id, "show_type": 1 }
                });
                return;
            } else if (lay_id == 4) {
                table.render({
                    elem: '#isPendingDelivery',
                    url: '/api/CloudShop/user/select/my_order/', // 此处为静态模拟数据，实际使用时需换成真实接口
                    cols: [[
                        { field: 'order_id', title: 'ID', },
                        { field: 'goods_name', title: '商品名称', },
                        { field: 'order_price', title: '商品价格', },
                        { field: 'order_status', title: '商品状态', },
                        { field: 'buy_user_name', title: '客户名' },
                        { field: 'buy_user_email', title: '客户邮箱' },
                        { field: 'order_time', title: '下单时间' },
                        { width: 160, height: 50, title: '操作', templet: '#order_err' }
                    ]],
                    height: 310,
                    method: 'post',
                    where: { "user_id": Yyuser_info.id, "show_type": lay_id }
                });
                return;
            }else if (lay_id == 5) {
                table.render({
                    elem: '#isPendingDelivery',
                    url: '/api/CloudShop/user/select/my_order/', // 此处为静态模拟数据，实际使用时需换成真实接口
                    cols: [[
                        { field: 'order_id', title: 'ID', },
                        { field: 'goods_name', title: '商品名称', },
                        { field: 'order_price', title: '商品价格', },
                        { field: 'order_status', title: '商品状态', },
                        { field: 'buy_user_name', title: '客户名' },
                        { field: 'buy_user_email', title: '客户邮箱' },
                        { field: 'order_time', title: '下单时间' },
                        { width: 200, height: 50, title: '操作', templet: '#my_buy_order' }
                    ]],
                    height: 310,
                    method: 'post',
                    where: { "user_id": Yyuser_info.id, "show_type": lay_id }
                });
                return;
            }else if (lay_id == 6) {
                table.render({
                    elem: '#isPendingDelivery',
                    url: '/api/CloudShop/user/select/my_order/', // 此处为静态模拟数据，实际使用时需换成真实接口
                    cols: [[
                        { field: 'order_id', title: 'ID', },
                        { field: 'goods_name', title: '商品名称', },
                        { field: 'order_price', title: '商品价格', },
                        { field: 'order_status', title: '商品状态', },
                    ]],
                    height: 310,
                    method: 'post',
                    where: { "user_id": Yyuser_info.id, "show_type": lay_id }
                });
                return;
            }else if (lay_id == 7) {
                table.render({
                    elem: '#isPendingDelivery',
                    url: '/api/CloudShop/user/select/my_order/', // 此处为静态模拟数据，实际使用时需换成真实接口
                    cols: [[
                        { field: 'order_id', title: 'ID', },
                        { field: 'goods_name', title: '商品名称', },
                        { field: 'order_price', title: '商品价格', },
                        { field: 'order_status', title: '商品状态', },
                        { field: 'buy_user_name', title: '商家名称' },
                        { field: 'buy_user_email', title: '商家邮箱' },
                        { field: 'order_time', title: '下单时间' },
                    ]],
                    height: 310,
                    method: 'post',
                    where: { "user_id": Yyuser_info.id, "show_type": lay_id }
                });
                return;
            }
            table.render({
                    elem: '#isPendingDelivery',
                    url: '/api/CloudShop/user/select/my_order/', // 此处为静态模拟数据，实际使用时需换成真实接口
                    cols: [[
                        { field: 'order_id', title: 'ID', },
                        { field: 'goods_name', title: '商品名称', },
                        { field: 'order_price', title: '商品价格', },
                        { field: 'order_status', title: '商品状态', },
                        { field: 'buy_user_name', title: '客户名' },
                        { field: 'buy_user_email', title: '客户邮箱' },
                        { field: 'order_time', title: '下单时间' },
                    ]],
                    height: 310,
                    method: 'post',
                    where: { "user_id": Yyuser_info.id, "show_type": lay_id }
                });
        });

        // 点击事件
        util.on('lay-on', {
            is_shohuo: (e) => {
                a(e, '/api/CloudShop/user/accept/')
            },
            fahuo: (e) => {
                // 发货按钮
                a(e, '/api/CloudShop/user/deliver/');
            },
            tuikuan: (e) => {
                var order_id = e[0].parentNode.parentNode.parentNode.parentNode.parentNode.querySelector('td[data-field="order_id"]').innerText;
                a(e, '/api/CloudShop/user/refund/');
            }
        })
        // 创建表格实例
        table.render({
            elem: '#isPendingDelivery',
            url: '/api/CloudShop/user/select/my_order/', // 此处为静态模拟数据，实际使用时需换成真实接口
            cols: [[
                { field: 'order_id', title: 'ID', },
                { field: 'goods_name', title: '商品名称', },
                { field: 'order_price', title: '商品价格', },
                { field: 'order_status', title: '商品状态', },
                { field: 'buy_user_name', title: '客户名' },
                { field: 'buy_user_email', title: '客户邮箱' },
                { field: 'order_time', title: '下单时间' },
                { width: 160, height: 50, title: '操作', templet: '#ID-table-demo-css-tool' }
            ]],
            height: 310,
            method: 'post',
            where: { "user_id": Yyuser_info.id, "show_type": 1 }
        });
        // 日期
        laydate.render({
            elem: '.order_time'
        });
        // 搜索提交
        form.on('submit(demo-table-search)', function (data) {
            var field = data.field; // 获得表单字段
            console.log(field);
            // 执行搜索重载
            table.reload('isPendingDelivery', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
            return false; // 阻止默认 form 跳转
        });
    });
</script>

{% endblock %}